<script setup lang="ts">
import TableHead from './TableHead.vue'
import ReportPerson from './ReportPerson.vue'
import ContextmenuBox from './ContextmenuBox.vue'

import useAll from './useAll'
import { loadCompanyProduct } from '@/api/modules/enterpriseQuarterlyReport'

const {
  columns,
  title,
  lists,
  informant,
  left,
  top,
  onContextmenu,
  clickCallback,
  loadPrevList,
  delRow,
  appendRow,
  prependRow,
  report,
  saveStage,
  exportFile,
} = useAll(loadCompanyProduct)
</script>

<template>
  <div
    class="statement-table width-100 height-100 position-relative overflow-hidden"
  >
    <slot
      name="title"
      :title="title"
      :report="report"
      :load-prev-list="loadPrevList"
      :save-stage="saveStage"
      :export-file="exportFile"
    >
      <h2 class="table-title">
        {{ title }}
      </h2>
    </slot>
    <div class="report-table-head">
      <table class="report-table">
        <TableHead
          :columns="columns"
          show-line-number
        />
      </table>
    </div>
    <ElScrollbar
      class="bg-color"
      style="height: calc(100% - 127px)"
      wrap-style="overflow-x: hidden;"
    >
      <table class="report-table">
        <tbody ref="tbody">
          <tr v-for="(item, i) in lists" :key="item.uuid">
            <th class="readonly line-number width-40px">
              {{ i + 1 }}
            </th>
            <td
              v-for="(d, index) in item.data"
              :key="item.uuid + index"
            >
              <div v-if="!d.editable" class="span-cell">
                {{ d.value }}
              </div>
              <div v-else class="input-cell">
                <input
                  v-model="d.value"
                  type="text"
                  @click="clickCallback"
                  @contextmenu="
                    evt => onContextmenu(evt, i)
                  "
                >
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="fill-description">
        <ReportPerson v-model="informant" />
      </div>
    </ElScrollbar>
    <ContextmenuBox
      :left="left"
      :top="top"
      @del-row="delRow"
      @prepend-row="prependRow"
      @append-row="appendRow"
    />
  </div>
</template>
